<template>
  <!--  房间管理由楼栋管理改写-->
  <div>
    <h3>设备型号管理</h3>
    <el-dialog
      :title="dialogConfig.openType ==='add'?dialogConfig.addName:dialogConfig.editName"
      :close-on-click-modal="false"
      :visible.sync="dialogConfig.dialogFormVisible"
    >
      <template></template>
      <!--      Dialog表单-->
      <CommonForm
        ref="my-form"
        :form="dialogForm"
        :formLabel="dialogFormLabel"
        :formConfig="dialogFormLConfig"
      >
      </CommonForm>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitDialogForm(dialogForm)">确 定</el-button>
        <el-button @click="dialogConfig.dialogFormVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!--    按钮区域-->
    <div class="mainBtn">
      <el-button type="primary" plain size="medium" @click="clickAddData"
      >添 加</el-button>
      <!--      删除确认提示框-->
      <el-popconfirm
        icon="el-icon-info"
        icon-color="red"
        :title="
        tableSelected.length < 1 ?
      ' 请在表格中选择 '
  : '确认要删除' + tableSelected.length + '条数据？' "
        @confirm="handleDeleteClick(tableSelected)"
      >
        <el-button type="danger" slot="reference" plain size="medium"
        >删 除</el-button>
      </el-popconfirm>

    </div>
    <!--      表格-->
    <div style="height: 400px;">
      <CommonTable v-loading = "loading"  element-loading-text="拼命加载中"
                   :tableData="tableData"
                   :tableLabel="tableLabel"
                   :tableConfig="tableConfig"
                   @handleSelectionChange="handleSelectionChange"
                   @sizeChange="getTableData(1, tableConfig.size, {})"
                   @currentPage="getTableData(tableConfig.page, tableConfig.size, {})"
      >
        <template v-slot:operation>
          <el-table-column prop="operation" label="操作">
            <template slot-scope="scope">
              <el-tooltip
                :enterable="false"
                class="item"
                content="编辑"
                placement="top"
              >
                <el-button
                  type="primary"
                  size="mini"
                  @click="clickEditData(scope.row)"
                >编辑</el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </template>
      </CommonTable>
    </div>
  </div>
</template>

<script>
import CommonManageMain from "components/common/CommonManageMain.vue";
import CommonTable from "components/common/CommonTable.vue";
import CommonForm from "components/common/CommonForm.vue";
import 'element-ui/lib/theme-chalk/base.css';
import {
  addEquimentModel,
  deleteEquimentModel,
  editEquimentModel,
  getEquipmentModel
} from "@/api/equipmentMange/equipModelManage";
import {getProviderNameId} from "@/api/systemManage/organizationManage";
import Vue from "vue";

export default {
  name:"equipModelManage",
  components: {
    CommonManageMain,
    CommonTable,
    CommonForm
  },
  beforeMount() {
    //初始化表格
    // this.getTableData(1,this.tableConfig.size,{})
    this.getProvider();
  },
  data(){
    return {
      //Dialog
      dialogConfig: {
        openType: 'add',
        addName: '添加设备型号',
        editName: '编辑设备型号',
        dialogFormVisible: false,
      },
      dialogForm: {
        providerId:'',
        equipmentModel:'',
        equipmentNumber:'',
        installedNumber:'',
      },
      dialogFormLabel: [
        {
          model:'providerId',
          label:'服务商',
          type:'select',
          options:[]
        },
        {
          model:'equipmentModel',
          label: '设备型号'
        },
        {
          model: 'equipmentNumber',
          label: '设备数量'
        },
        {
          model: 'installedNumber',
          label:'安装数量'
        }
      ],
      dialogFormLConfig: {
        labelWidth: "100px",
        inline: false,
        labelPosition: "right",

      },
      // Table
      loading: false,//表格载入
      tableData:[
        {
          "equipmentModelId": "9054744234544",
          "equipmentProvider": "寮步镇服务商",
          "providerId": 1016913,
          "equipmentModel": "ASD203424",
          "equipmentNumber": 100,
          "installedNumber": 70
        },
        {
          "equipmentModelId": "905474437235404544",
          "equipmentProvider": "寮步镇服务商",
          "providerId": 1016914,
          "equipmentModel": "ASD203423",
          "equipmentNumber": 180,
          "installedNumber": 80
        },
        {
          "equipmentModelId": "905474437015234544",
          "equipmentProvider": "寮步镇服务商",
          "providerId": 1016913,
          "equipmentModel": "ASD203424",
          "equipmentNumber": 100,
          "installedNumber": 70
        },
        {
          "equipmentModelId": "9054744370154042344",
          "equipmentProvider": "寮步镇服务商",
          "providerId": 1016913,
          "equipmentModel": "ASD203424",
          "equipmentNumber": 100,
          "installedNumber": 70
        },
        {
          "equipmentModelId": "905474437015404542",
          "equipmentProvider": "寮步镇服务商",
          "providerId": 1016913,
          "equipmentModel": "ASD203424",
          "equipmentNumber": 100,
          "installedNumber": 70
        },
      ],//表格数据
      tableLabel:[
        {
          prop:"equipmentModel",
          label:"设备型号",
          //排序
          sort:true
        },
        {
          prop:"equipmentProvider",
          label:"服务商",
          sort:true
        },
        {
          prop:"equipmentNumber",
          label:"设备数量",
          sort:true
        },
        {
          prop: 'installedNumber',
          label: '安装数量',
          sort:true
        }
      ],
      tableConfig:{
        isShowLoading:true,
        //当前页
        page:1,
        total:30,
        //单页条目
        size:10,
        //多选
        selection:true,
        //行唯一辨识值 跨页
        rowKey:"individualId"
      },
      tableSelected:[],//表格选中合集
      tableColumnList: [],//列的集合
    }
  },
  provide: function () {
    return {

    }
  },
  watch:{
    // 当 dialog 关闭时 ，重置表单
    'dialogConfig.dialogFormVisible' (newValue) {
      if(!newValue) {
        this.dialogForm = this.$options.data().dialogForm
      }
    }

  },
  methods:{
    //-----------------表格------------------
    //获取数据表格
    getTableData(page,pageSize){
      getEquipmentModel(page,pageSize).then(res=>{
        let resultData = res.data;
        if (resultData.code == 200){
          this.loading = false
          this.tableData = resultData.data.records;
          const dataList = this.tableData.length;
          this.tableConfig.total = resultData.data.total;
          this.$notify({
            type: 'success',
            message: dataList <1 ? '未查找到相关数据' : '成功获取' + dataList + '条数据'
          })
        }
      }).catch((onerror)=>{
        this.$message({
          type:'error',
          showClose: true,
          message:'网络错误，请查看控制台'
        })
        console.log(onerror);
        this.loading = false
      })
    },
    //获取运营商
    getProvider(){
      getProviderNameId().then(res=>{
        const result = res.data;
        if (result.code == 200){
          const areaList = result.data;
          let myProviderList = [];
          areaList.forEach( (item) =>{
            let providerList = item.areaList || [];
              for (let i of providerList){
                let {providerName:label,providerId:value} = i;
                 myProviderList.push({label,value});
              }
          })
          //设置服务商列表
          Vue.set(this.dialogFormLabel[0],'options',myProviderList)
        }

      })
    },
    //处理添加设备型号操作
    clickAddData(rowData){
      this.dialogConfig.openType = 'add';
      this.dialogConfig.dialogFormVisible = true;

    },
    //提交新设备型号数据
    submitDialogForm(formData){
      const openType = this.dialogConfig.openType;
      if (openType === 'add' ){
        // 默认的提交
        addEquimentModel(formData).then(res=>{
          if (res.data.code === 200){
            this.$message.success(res.data.message);
            this.getTableData(1,this.tableConfig.size);
            this.dialogConfig.dialogFormVisible=false;
          }
          else {
            this.$message.error(res.data.message);
          }
        }).catch(e=>{
          console.log(e);
        });
      }
      else {
        const modelID = this.dialogForm.equipmentModelId ||'';
        editEquimentModel(modelID,formData).then(res=>{
          if (res.data.code === 200){
            this.$message.success(res.data.message);
            this.getTableData(1,this.tableConfig.size);
            this.dialogConfig.dialogFormVisible=false;
          }
          else {
            this.$message.error(res.data.message);
          }
        }).catch(e=>{
          console.log(e);
        });
      }

    },
    //table section 表格选中事件
    handleSelectionChange(val){
      this.tableSelected = val
    },
    resetData(){
      //重置添加表单
      this.searchForm = this.$options.data().searchForm;
    },
    //处理编辑操作
    clickEditData(rowData){
      this.dialogConfig.openType = 'edit';
      this.dialogConfig.dialogFormVisible = true;
      this.dialogForm = {
        //服务商实际ID，不做显示
        equipmentModelId:rowData.equipmentModelId,
        equipmentModel: rowData.equipmentModel,
        equipmentNumber: rowData.equipmentNumber,
        //服务商ID字段用于服务商名称数据回显，并非实际服务商ID
        providerId: rowData.equipmentProvider,
        installedNumber: rowData.installedNumber,
      };
    },
    //删除设备型号
    async handleDeleteClick(selectList){
      for (const item of selectList) {
        try {
          await deleteEquimentModel(item.equipmentModelId).then(res=>{
            const result = res.data;
            if (result.code==200){
              this.$notify.success(`已删除${item.equipmentModel}`)
            }
            else {
              this.$notify.error(`未能删除${item.equipmentModel}`)
              return false;
            }
          }).catch(e=>{
            this.$notify.error(`未能删除${item.equipmentModel},请检查网络`)
          });
        }
       catch (e){
         console.log(e);
       }
      }
      //重新获取设备型号数据
      this.getTableData(this.tableConfig.page,this.tableConfig.size);
    }
  }
}
</script>

<style>
.mainBtn{
  width: 100%;
  position: relative;
  margin: 30px 0 20px;
}
.mainBtn button{
  margin-left:10px;
}
.searchDiv {
  margin: 10px 0;
}
.showColumnBtn {
  position: absolute;
  right: 0;
}
</style>
